<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .game-container {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 100%;
            flex-wrap: wrap;
        }

        #gameCanvas {
            border: 2px solid #333;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
        }

        #gameControls {
            text-align: center;
            margin: 0 auto;
            padding: 0 8px;
        }

        #gameScore {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #score {
            font-size: 24px;
            margin: 10px 0;
        }

        #startBtn {
            font-size: 18px;
            padding: 12px 24px;
            background: linear-gradient(145deg, #f0f0f0, #cacaca);
            color: #333;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 5px 5px 10px #bebebe,
            -5px -5px 10px #ffffff;
            position: relative;
            overflow: hidden;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        #startBtn::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 50%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
            border-radius: 8px 8px 0 0;
            pointer-events: none;
        }

        #startBtn:hover {
            transform: translateY(-2px);
            box-shadow: 6px 6px 12px #bebebe,
            -6px -6px 12px #ffffff;
            background: linear-gradient(145deg, #f5f5f5, #d0d0d0);
        }

        #startBtn:active {
            transform: translateY(1px);
            box-shadow: inset 4px 4px 8px #bebebe,
            inset -4px -4px 8px #ffffff;
            background: linear-gradient(145deg, #e6e6e6, #c0c0c0);
        }

        .controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 180px;
            margin: 20px auto;
        }

        .control-btn {
            width: 60px;
            height: 60px;
            font-size: 24px;
            background: linear-gradient(145deg, #f0f0f0, #cacaca);
            color: #333;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 5px 5px 10px #bebebe,
            -5px -5px 10px #ffffff;
            position: relative;
            overflow: hidden;
        }

        .control-btn::before {
            content: '';
            position: absolute;
            top: 5%;
            left: 5%;
            right: 5%;
            bottom: 5%;
            border-radius: 50%;
            z-index: -1;
        }

        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 6px 6px 12px #bebebe,
            -6px -6px 12px #ffffff;
        }

        .control-btn:active {
            transform: translateY(1px);
            box-shadow: inset 4px 4px 8px #bebebe,
            inset -4px -4px 8px #ffffff;
        }

        #up {
            grid-column: 2;
        }

        #left {
            grid-column: 1;
            grid-row: 2;
        }

        #right {
            grid-column: 3;
            grid-row: 2;
        }

        #down {
            grid-column: 2;
            grid-row: 3;
        }
    </style>
</head>

<body>
<div class="game-container">
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    <div id="gameControls">
        <div id="gameScore">
            <div id="score">得分: 0</div>
            <button id="startBtn">开始游戏</button>
        </div>
        <div class="controls">
            <button id="up" class="control-btn" onclick="changeDirectionByButton('up')">↑</button>
            <button id="left" class="control-btn" onclick="changeDirectionByButton('left')">←</button>
            <button id="right" class="control-btn" onclick="changeDirectionByButton('right')">→</button>
            <button id="down" class="control-btn" onclick="changeDirectionByButton('down')">↓</button>
        </div>
    </div>
</div>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreElement = document.getElementById('score');
    const startBtn = document.getElementById('startBtn');

    const gridSize = 15;
    const tileCount = canvas.width / gridSize;

    let snake = [{ x: 10, y: 10 }];
    let food = { x: 15, y: 15 };
    let dx = 0;
    let dy = 0;
    let score = 0;
    let gameRunning = false;

    function drawGame() {
        if (!gameRunning) return;

        clearCanvas();
        moveSnake();
        drawSnake();
        drawFood();
        checkCollision();
        updateScore();
        setTimeout(drawGame, 200);
    }

    function clearCanvas() {
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    function moveSnake() {
        const head = { x: snake[0].x + dx, y: snake[0].y + dy };
        snake.unshift(head);

        if (head.x === food.x && head.y === food.y) {
            generateFood();
            score += 10;
        } else {
            snake.pop();
        }
    }

    function drawSnake() {
        snake.forEach((segment, index) => {
            const gradient = ctx.createLinearGradient(
                segment.x * gridSize,
                segment.y * gridSize,
                (segment.x + 1) * gridSize,
                (segment.y + 1) * gridSize
            );
            gradient.addColorStop(0, '#4CAF50');
            gradient.addColorStop(1, '#45a049');
            ctx.fillStyle = gradient;
            ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);

            if (index === 0) {
                // Draw eyes
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(segment.x * gridSize + 5, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
                ctx.arc(segment.x * gridSize + 10, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
                ctx.fill();
            }
        });
    }

    function drawFood() {
        const gradient = ctx.createRadialGradient(
            food.x * gridSize + gridSize / 2,
            food.y * gridSize + gridSize / 2,
            2,
            food.x * gridSize + gridSize / 2,
            food.y * gridSize + gridSize / 2,
            gridSize / 2
        );
        gradient.addColorStop(0, '#ff6b6b');
        gradient.addColorStop(1, '#ee5253');
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 1, 0, 2 * Math.PI);
        ctx.fill();
    }

    function generateFood() {
        food.x = Math.floor(Math.random() * tileCount);
        food.y = Math.floor(Math.random() * tileCount);
    }

    function checkCollision() {
        const head = snake[0];

        if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
            gameOver();
        }

        for (let i = 1; i < snake.length; i++) {
            if (head.x === snake[i].x && head.y === snake[i].y) {
                gameOver();
            }
        }
    }

    function gameOver() {
        gameRunning = false;
        startBtn.textContent = '重新开始';
        startBtn.style.display = 'inline-block';
        alert(`游戏结束！你的得分是: ${score}`);
    }

    function updateScore() {
        scoreElement.textContent = `得分: ${score}`;
    }

    function resetGame() {
        snake = [{ x: 10, y: 10 }];
        food = { x: 15, y: 15 };
        dx = 0;
        dy = 0;
        score = 0;
        updateScore();
    }

    document.addEventListener('keydown', changeDirection);

    function changeDirection(event) {
        const LEFT_KEY = 37;
        const RIGHT_KEY = 39;
        const UP_KEY = 38;
        const DOWN_KEY = 40;

        const keyPressed = event.keyCode;

        const goingUp = dy === -1;
        const goingDown = dy === 1;
        const goingRight = dx === 1;
        const goingLeft = dx === -1;

        if (keyPressed === LEFT_KEY && !goingRight) {
            dx = -1;
            dy = 0;
        }

        if (keyPressed === UP_KEY && !goingDown) {
            dx = 0;
            dy = -1;
        }

        if (keyPressed === RIGHT_KEY && !goingLeft) {
            dx = 1;
            dy = 0;
        }

        if (keyPressed === DOWN_KEY && !goingUp) {
            dx = 0;
            dy = 1;
        }
    }

    function changeDirectionByButton(direction) {
        if (direction === 'left' && dx !== 1) {
            dx = -1;
            dy = 0;
        } else if (direction === 'up' && dy !== 1) {
            dx = 0;
            dy = -1;
        } else if (direction === 'down' && dy !== -1) {
            dx = 0;
            dy = 1;
        } else if (direction === 'right' && dx !== -1) {
            dx = 1;
            dy = 0;
        }
    }

    startBtn.addEventListener('click', () => {
        resetGame();
        gameRunning = true;
        startBtn.style.display = 'none';
        drawGame();
    });

    clearCanvas();
</script>
</body>

</html>
